import React, { Component } from 'react'
import { NavBar, Input, Button } from 'react-vant';
import Mytaps from './myTaps';
import CTX from './ctx';
export default class Add extends Component {
    static contextType = CTX
    state = {
        consultnr: "",
        titleType: ['消费维权', '合同纠纷', '婚姻家庭'],
        titleIndex: 0,
        timeType: ['9:00-10:00', '10:00-11:00', '11:00-12:00', '12:00-13:00', '13:00-14:00'],
        timeIndex: 0,
    }
    // 改变标题的索引
    setTitleIndex = (index) => {
        this.setState({ titleIndex: index })
    }

    // 改变时间的索引
    setTimeIndex = (index) => {
        this.setState({ timeIndex: index })
    }
    formatDate = (date) => {
        const year = date.getFullYear();
        const month = date.getMonth() + 1; // 月份从0开始，所以要加1
        const day = date.getDate();
        const hours = date.getHours().toString().padStart(2, '0');
        const minutes = date.getMinutes().toString().padStart(2, '0');
        const seconds = date.getSeconds().toString().padStart(2, '0');
        return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
    }
    render() {
        let { consultnr, titleType, titleIndex, timeType, timeIndex } = this.state
        let { add } = this.context
        return (
            <div style={{ padding: "15px", paddingTop: "0" }}>
                <NavBar
                    title="添加页面"
                    leftText="返回"
                    onClickLeft={() => {
                        this.props.history.push("/home")
                    }}
                />

                {/* 输入内容 */}
                <Input.TextArea placeholder="请输入咨询内容,建议200字以内" value={consultnr} maxLength="200" onChange={(val) => {
                    this.setState({ consultnr: val })
                }} style={{ border: "1px solid #ccc" }} />

                {/* 请选择服务类型 */}
                <p>请选择服务类型</p>
                <Mytaps data={titleType} dataIndex={titleIndex} setIndex={this.setTitleIndex}></Mytaps>
                <p>请选择服务时间</p>
                <Mytaps data={timeType} dataIndex={timeIndex} setIndex={this.setTimeIndex}></Mytaps>
                <div style={{ marginTop: "240px" }}>
                    <Button disabled={!consultnr} block type="primary" onClick={() => {
                        let obj = {
                            id: new Date().getTime(),
                            title: titleType[titleIndex],
                            time: this.formatDate(new Date()),
                            ctime: timeType[timeIndex],
                            consultnr,
                            selected: false,
                            del: false
                        }
                        console.log(obj);
                        add(obj)
                        this.props.history.push("/home")
                    }}>发布</Button>
                </div>
            </div>
        )
    }
}
